<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">


    <!--vue的组件开发，全局组件和局部组件
        作用：1.组件减少vue根实例的代码量
             2.一个组件负责完成一个项目中的一个功能。实现业务的隔离
             3.组件可以在vue中实现复用
        vue推荐开发方式：一个应用中只能存在一个vue实例
    -->

    <!--使用全局组件-->
    <login></login>

    <!--使用局部组件-->
    <logintest></logintest>

</div>

</body>
</html>

<script src="resource/vue.js"></script>
<script src="resource/axios.min.js"></script>

<script>


    // //定义一个全局组件，参数1：组件名字，参数2：组件的配置对象
    Vue.component('login',{
        template:'<div><h2>登录界面</h2></div>'//推荐使用div包裹。因为需要有一个根节点
    });


    //局部组件也有自己的生命周期
    //此处定义一个局部login组件，并在vue中直接注册
    const logintest = {
        template: '<div><h1>登录</h1></div>',//定义组件的html代码
        data(){     //局部组件中定义数据，只能是函数，然后加return，日后直接使用{{}}取值
            return {
                msg:"这是登录方法",//通过return返回数据
                age:10
            }
        },
        methods: {
            test(){
                this.age++;
            }
        },
        computed(){},//定义计算属性
        beforeCreate() {},
        created(){},
        beforeMount(){},
        mounted(){},
        beforeUpdate() {
        },
        updated(){},
    }



    const app = new Vue({
        el:"#app",
        data: {
            msg:"vue 组件使用"
        },
        methods:{
        },
        components:{//在这里注册局部组件
            logintest,
            }

        });




</script>